<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>边框图形(border graphical)</title>
  <!-- 
    CSS中的边框（Border）属性可以用来为元素添加边框线，从而美化元素的外观。以下是关于CSS中边框图形效果的主要要点： 
 
      1. 边框样式（Border Style）：使用 border-style 属性来定义边框的样式，常见取值包括实线（solid）、虚线（dashed）、双实线（double）等。 
      2. 边框颜色（Border Color）：使用 border-color 属性来指定边框的颜色，可以使用颜色名称、十六进制值或RGB值来定义颜色。 
      3. 边框宽度（Border Width）：使用 border-width 属性来定义边框的宽度，可以使用像素（px）、百分比（%）或其他单位来指定宽度。 
      4. 圆角边框（Border Radius）：使用 border-radius 属性可以为边框添加圆角效果，使边框线变得圆润。 
      5. 边框阴影（Border Shadow）：通过 box-shadow 属性可以为边框添加阴影效果，使边框看起来更加立体和具有层次感。 
   -->
   <style>
     .border-triangle {
       width: 0;
       height: 0;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       border-bottom: 100px solid #f00;

       /* 旋转 */
       transform: rotate(180deg);
     }
   </style>
</head>
<body>

  <div class="border-triangle"></div>
  
</body>
</html>